import React, { useEffect } from 'react'
import './style.scss'
import loginPic from '@/assets/login.png'
import loginlogo from '@/assets/loginlogo.png'
import { Form, Button, Input, message } from 'antd'
import { doLogin } from '@a/login'
import { useDispatch } from 'react-redux'
import { initUser, filterAuth } from '@s/modules/user'
import { useLocation, useNavigate } from 'react-router-dom'
import PicAuthCode from './PicAuthCode'
export default function LoginPage() {
  const localtion = useLocation()
  useEffect(() => {

  }, [localtion])
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const userLogin = (params) => {
    doLogin(params).then(res => {
      console.log(res);
      if (res.data.code === 200) {
        const { role, userInfo, token } = res.data.data;
        localStorage.setItem('role', role);
        localStorage.setItem('userInfo', JSON.stringify(userInfo));
        localStorage.setItem('token', token);
        dispatch(initUser(res.data.data))
        dispatch(filterAuth())
        message.success(res.data.msg, 2, () => {
          navigate('/dashBoard', { replace: true })
          navigate(0)
        })
      }
    })
  }
  return (
    <div className="biglogin">
      <div className="login">
        <img className="login-bimg" src={loginPic} alt="" />
        <div className="login-fr">
          <img className="login-simg" src={loginlogo} alt="" />
          <Form
            onFinish={
              userLogin
            }
          >
            <Form.Item
              label="用户名"
              name="userName"
              rules={[
                {
                  required: true,
                  message: '用户名必填'
                },
                {
                  pattern: /^\w{4,8}$/,
                  message: '用户名是4到8位英文数字字母下划线组成'
                }
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="pwd"
              rules={[
                {
                  required: true,
                  message: '密码必填'
                },
                {
                  pattern: /^\w{3,8}$/,
                  message: '用户名是3到8位英文数字字母下划线组成'
                }
              ]}
            >
              <Input type='password' />
            </Form.Item >
            <Form.Item name='yzm' className='yzm' label="验证码"
            >
              <Input style={{
                width: 160
              }} />
              <PicAuthCode className='yzmPic' />
            </Form.Item>

            <Form.Item
            >
              <Button className='loginBut' htmlType='submit' type='primary'>登录</Button>
              <Button htmlType='reset'>重置</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div >
  )
}
